<template>
  <div>
    <!-- action必须为#，阻止默认上传，改为手动上传 -->
    <!-- on-preview可以让图片有放大镜 -->
    <el-upload
      v-loading="loading"
      class="upload-demo"
      list-type="picture-card"
      :file-list="fileList"
      action="#"
      :on-preview="preview"
      :class="{ disabled: fileComputed }"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :http-request="handleUpload"
      :before-upload="beforeUpload"
    >
      <span>点击上传</span>
    </el-upload>
    <slot></slot>
    <!-- 弹层 -->
    <el-dialog title="图片" :visible.sync="showDialog">
      <!-- 点击❌号  ele-ui会自动调用一个自定义事件$emit（'updata:visible'） -->
      <img :src="imgUrl" style="width: 100%" alt="" />
    </el-dialog>
  </div>
</template>

<script>
// 上传图片实现思路
// 1.根据ele-ui实现结构，样式  ->  并不能实现图片的上传预览
// 2.解决图片上传预览 -> 把要上传的图片存到fileList
//    *2.1解决图片展示问题：通过file—list属性（数组）
//     2.2解决图片预览：     添加一个：on-preview
//     2.3解决图片删除：     添加一个on-remove  -> this.fileList =fileList
//     2.4拿到选择的文件：   添加一个:on-change  ->  ？？？为什莫最后图片的数组长度从1到0
//     2.5手动上传：  添加一个action,默认值为#，为了阻止默认上传，需要自动手动上传
//         点击完图片，选择了图片，ele-ui钻进会进行自动上传，上传到#去了，不是我们需要的，我们需要自己上传到服务器
//         需要找到一个恰当的时机，自己上传到腾讯云的服务器
//          通过before-upload钩子上传图片，这个钩子函数还可以做校验
// 通过http-request钩子可以手动上传图片，这个钩子函数
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDa0A3f3A0ZqqZ1B4f15sNcZFepjLgjVzC',
  SecretKey: 'wbz5uUnpa4GBpBG3ZnlRqxnLcdNp0tVr'
})
export default {
  name: 'UploadImage',
  data () {
    return {
      fileList: [], // 上传图片列表，有几个文件，就展示几张图
      showDialog: false,
      imgUrl: '', // 预览图片地址
      currentFileUid: '', // 用一个变量 记住当前上传的图片id
      loading: false
    }
  },
  computed: {
    // 设定一个计算属性 判断是否已经上传完了一张
    fileComputed () {
      return this.fileList.length === 1
    }
  },
  methods: {
    preview (file) {
      console.log(file)
      // 打开弹层
      this.showDialog = true
      // 复制地址
      this.imgUrl = file.url
    },
    handleRemove (file, fileList) {
      // file是点击删除的文件
    // fileList是删除后的fileList真实数据
    // 将原来的文件给排除掉了 剩下的就是最新的数组了
      this.fileList = fileList
    },
    handleChange (file, fileList) {
      this.fileList = fileList
    },
    beforeUpload (file) {
      console.log(file)
      // file.size 限制文件大小5mb
      const fileMaxSize = 5 * 1024 * 1024
      if (file.size > fileMaxSize) {
        // 不能上传
        this.$message.error('图片只支持5MB以下')
        return false
      }
      // file.type
      const fileTypeList = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
      if (!fileTypeList.includes(file.type)) {
        // 不能上传
        this.$message.error('图片只支持jpg,png,gif类型')
        return false
      }

      this.currentFileUid = file.uid// 记住当前的uid
      this.loading = true
      return true
      // 校验文件
      // 上传到服务器
    },
    // 记录图片上传的唯一标识
    handleUpload (params) {
      // 上传到腾讯云
      // params.file
      cos.putObject({
        Bucket: 'nskr666-1313177651', // 存储桶
        Region: 'ap-chengdu', // 地域
        Key: params.file.name, // 文件名
        Body: params.file, // 要上传的文件对象
        StorageClass: 'STANDARD', // 上传的模式类型 直接默认 标准模式即可
        // 上传到腾讯云 => 哪个存储桶 哪个地域的存储桶 文件  格式  名称 回调
        onProgress: (params) => {
          this.percent = params.percent * 100
        }
      }, (err, data) => {
        // data返回数据之后 应该如何处理
        // console.log(err || data)
        if (!err && data.statusCode === 200) {
          // 记录一下上传到腾讯云服务器的地址
        // 在this.fileList找到上传的图片，把图片的url从本地的改为线上的
          this.fileList.forEach(item => {
            if (item.uid === this.currentFileUid) {
            // 把图片的url从本地的改为线上的
              item.url = 'http://' + data.Location
              // item下添加一个uopload为true 为了确保url是已经上传到腾讯云服务器的url
              item.upload = true
            }
          })
          setTimeout(() => {
            this.loading = false // 隐藏进度条
          }, 2000)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 是否隐藏取决于是否有一张图 */

.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}
::v-deep {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 60px;
    line-height: 60px;
  }
}
::v-deep {
  .el-upload-list__item {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transform: translateY(1px);
    width: 100px;
    height: 60px;
    line-height: 60px;
    margin: 0;
    padding: 0;
  }
}
</style>
